<template>
  <t-layout>
    <t-aside>
      <t-menu
        theme="light"
        value="dashboard"
        style="margin-right: 50px"
        height="550px"
      >
        <template #logo>
          <img
            width="136"
            class="logo"
            src="https://www.tencent.com/img/index/menu_logo_hover.png"
            alt="logo"
          />
        </template>
        <t-menu-item value="dashboard">
          <template #icon>
            <t-icon name="dashboard" />
          </template>
          仪表盘
        </t-menu-item>
        <t-menu-item value="resource">
          <template #icon>
            <t-icon name="server" />
          </template>
          资源列表
        </t-menu-item>
      </t-menu>
    </t-aside>
    <!-- 内容区域 -->
    <t-layout>
      <t-calendar>
        <template #cellAppend="data">
          <div v-if="getShow(data)" class="cell-append-demo-outer">
            <t-tag
              theme="success"
              variant="light"
              size="small"
              class="activeTag"
              style="width: 100%"
            >
              {{ data.mode == "month" ? "我们的纪念日" : "我们的纪念月" }}
            </t-tag>
            <t-tag
              theme="warning"
              variant="light"
              size="small"
              class="activeTag"
              style="width: 100%"
            >
              {{ data.mode == "month" ? "家庭聚会" : "家庭聚会" }}
            </t-tag>
          </div>
        </template>
      </t-calendar>
    </t-layout>
  </t-layout>
</template>

<script setup lang="ts">
import dayjs from "dayjs";
import { ref } from "vue";

const getShow = (data: { mode: string; formattedDate: string; date: { getMonth: () => number; }; }) => data.mode === 'month'
  ? dayjs().format('YYYY-MM-DD') === data.formattedDate
  : data.date.getMonth() === new Date().getMonth();
</script>

<style scoped lang="scss">
.t-layout {
  height: 100%;
}
.t-calendar {
  display: flex;
  flex-direction: column;
  height: 100%;
}
::v-deep .t-calendar__table {
  display: flex;
  flex-direction: column;
  height: 100%;
}
::v-deep .t-calendar--full .t-calendar__panel {
  flex: 1;
}
::v-deep .t-calendar__table-body {
  display: flex;
  flex-direction: column;
  flex: 1;
}
::v-deep .t-calendar__table-body-row {
  flex: 1;
  .t-calendar__table-body-cell {
    height: 100%;
  }
}
</style>
